import Vue from 'vue'
import VueRouter from "vue-router";

import Home from "@/components/Home.vue";
import About from "@/components/About.vue";
import Movie from "@/components/Movie.vue";
import Tab1 from "@/components/tabs/Tab1.vue";
import Tab2 from "@/components/tabs/Tab2.vue";
import Main from "@/components/Main.vue";
import Login from "@/components/Login.vue";
// 把VueRouter安装为Vue项目的插件

Vue.use(VueRouter)
// 路由实例对象
const router = new VueRouter({
    // 定义hash地址与组件之间的关系
    routes: [
        // 路由重定向
        {path: '/', redirect: '/home'},
        {path: '/home', component: Home},
        // {path: '/movie', component: Movie},
        // 需求，在movie组件中，希望根据id的值，展示对应电影的详情信息
        // 两种方式，可以为路由规则开启props传参，从而方便的拿到动态参数的值
        {path: '/movie/:mid', component: Movie, props: true },
        {
            path: '/about',
            component: About,
            redirect: '/about/tab1',  // 也可通过默认子路由来重定向  {path: '',component: Tab1},路由链接要改下，默认子路由：如果children数组中，某个路由规则的path值为空字符串，则这条路由规则叫默认子路由
            children: [ // 通过children属性，嵌套声明子级路由规则
                {path: 'tab1', component: Tab1},
                {path: 'tab2', component: Tab2}
            ]
        },

        { path: '/main',component: Main},
        { path: '/login',component: Login}
    ]
})

// 导航守卫 为router实例对象，声明全局前置导航守卫
// 只要发生了路由的跳转，必然会触发beforeEach指定的function回调函数
router.beforeEach(function (to, from, next) {
    // to表示将要访问的路由的信息对象
    // from 表示将要离开的路由的信息对象

    // next三种调用方式
    // next()函数表示放行的意思  当前用户拥有访问后台主页的权限
    // next('/login') 用户没有后台访问的权限，强制跳转登录页面
    // next(false) 用户没有后台访问的权限，停留在当前页面，不允许跳转后台主页
    if(to.path === '/main') {
        const token = localStorage.getItem('token')
        if(token) {
            next()
        } else {
            next('/login')
        }
    } else {
        next()
    }

})

export default router
